import { Button, Space, Table, TabPane, Tabs } from 'ant-design-vue'
import { defineComponent, ref } from 'vue'

import { type ProTableProps, type ProTableRef, ProTable } from '@/components'

import CategoryEditDialog from './components/categoryEditDialog'

export default defineComponent({
  name: 'DcCategoriesManage',
  setup() {
    const tableRef = ref({} as ProTableRef)
    const tableConfig = ref({
      fixedHeight: true,
      options: {
        border: true,
        align: 'center',
        toolbarConfig: {
          perfect: false,
          slots: {
            buttons: 'toolbarButtons'
          }
        },
        columns: [
          // {
          //   type: 'expand',
          //   width: 50,
          //   fixed: 'left',
          //   slots: {
          //     content: 'openRow'
          //   }
          // },
          {
            title: '一级分类名称',
            field: 'name',
            minWidth: 100,
            treeNode: true
          },
          {
            title: '一级分类图标',
            field: '',
            minWidth: 120,
            slots: {
              default: 'firstIcon'
            }
          },
          {
            title: '显示排序',
            field: '',
            minWidth: 80
          },
          {
            title: '状态',
            field: '',
            minWidth: 100
          },
          {
            title: '操作',
            fixed: 'right',
            slots: {
              default: 'operation'
            },
            width: 180
          }
        ],
        treeConfig: {
          transform: true
        }
      }
    } as ProTableProps)

    const categoryEditDialog = ref<ComponentRef>({})

    function handleEdit() {
      categoryEditDialog.value!.openDialog()
    }

    function handleDisable() {}

    function handleCreate() {
      categoryEditDialog.value!.openDialog()
    }

    const data = [
      {
        name: '人气热卖',
        children: [{ name: '人气明星餐' }, { name: '单人餐' }]
      },
      { name: '限时折扣' }
    ]

    return {
      data,
      tableRef,
      tableConfig,
      handleEdit,
      handleDisable,
      handleCreate
    }
  },
  render() {
    return (
      <div>
        <Tabs type="card" onTabClick={tab => {}}>
          <TabPane key="1" tab="肯德基分类" />
          <TabPane key="2" tab="麦当劳分类" />
          <TabPane key="3" tab="星巴克分类" />
          <TabPane key="4" tab="瑞幸咖啡分类" />
        </Tabs>
        <ProTable
          ref="tableRef"
          data={this.data}
          v-slots={{
            operation: ({ row }) => (
              <Space>
                <Button
                  type="link"
                  size="small"
                  onClick={() => this.handleDisable()}
                  v-show={row.status != 2}
                >
                  禁用
                </Button>
                <Button
                  type="link"
                  size="small"
                  onClick={() => this.handleCreate()}
                  v-show={row.status != 2}
                >
                  新增
                </Button>
                <Button
                  type="link"
                  size="small"
                  onClick={() => this.handleEdit()}
                  v-show={row.status != 2}
                >
                  编辑
                </Button>
              </Space>
            ),
            toolbarButtons: () => {
              return (
                <Space>
                  <Button type="primary" onClick={this.handleCreate}>
                    新增分类
                  </Button>
                </Space>
              )
            }
          }}
          {...this.tableConfig}
        />
        <CategoryEditDialog ref="categoryEditDialog" />
      </div>
    )
  }
})
